import React from 'react'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Avatar, Button, Dropdown, Layout, theme } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
const { Header } = Layout;

function CommonHeader() {
  const navigate = useNavigate()

  const collapsed = useSelector(s => s.collapsed)
  const dispatch = useDispatch()

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const logOut = () => {
    localStorage.removeItem('token')
    navigate('/login')
  }

  const dropDownList = [
    {
      key: '0',
      label: (
        <Button color="default"
          style={{ background: 'transparent' }}
          variant="text">
          个人中心
        </Button>
      )
    },
    {
      key: '1',
      label: (
        <Button
          color="default"
          style={{ background: 'transparent' }}
          variant="text"
          onClick={() => logOut()}
        >
          退出登录
        </Button>
      )
    },
  ]
  return (
    <Header
      style={{
        padding: '0 60px 0 30px',
        background: colorBgContainer,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => dispatch({ type: "collapsed-slice/changeCollapsed", payload: "" })}
        style={{
          fontSize: '16px',
          width: 64,
          height: 64,
        }}
      />
      <Dropdown
        menu={{ items: dropDownList }}
        placement="bottom"
        arrow
      >
        <Avatar size="large" icon={<UserOutlined />} />
      </Dropdown>
    </Header>
  )
}

export default CommonHeader
